<template>
    <div class="home-page">
        <!-- 自定义导航栏 -->
        <div class="nav-custom">
            <div class="custom-title">
                <div class="title-logo"></div>
                <div class="title-tip">
                    <span>新鲜 · 亲民 · 快捷</span>
                </div>
            </div>
            <div class="custom-search">
                <SvgIcon name="search" color="#fff" width="0.5rem" height="0.5rem"></SvgIcon>
                <input placeholder="搜索商品" type="text">
                <SvgIcon name="code" color="#fff" width="0.4rem" height="0.4rem"></SvgIcon>
            </div>
        </div>
        <!-- 底部tabbar全局组件 -->
        <TabBar></TabBar>
        <div class="page-content" ref="divScrollRef">
            <div class="content-swiper">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="item,index in bannerList" :key="index">
                        <img :src="item.imgUrl" alt="轮播图">
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="content-category">
                <div class="category-item" v-for="item,index in homeCategory" :key="index">
                    <img :src="item.icon" alt="">
                    <span>{{ item.name }}</span>
                </div>
            </div>
            <!-- 热门推荐 -->
            <div class="content-hot">
                <div class="hot-item" v-for="item,index in homeHot" :key="index">
                    <div class="item-left">
                        <span>{{ item.title }}</span>
                        <img :src="item.pictures[0]" alt="" @click="navigateToPage(index + 1)">
                    </div>
                    <div class="item-right">
                        <span>{{ item.alt }}</span>
                        <img :src="item.pictures[1]" alt="" @click="navigateToPage(index + 1)">
                    </div>
                </div>
            </div>
            <!-- 猜你喜欢 -->
            <GuessLike ref="GuessLikeRef"></GuessLike>
        </div>
    </div>
</template>

<script setup lang='ts'>
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue';
import TabBar from '@/components/TabBar/TabBar.vue';
import GuessLike from "@/components/GuessLike/GuessLike.vue";
import { ref, onBeforeUnmount, onMounted, getCurrentInstance, onActivated, onDeactivated } from "vue";
//引入请求函数
import { reqBannerList, reqHomeCategory, reqHomeHot } from "@/api/home";
//引入ts数据类型约束
import type { reqBannerListResponse, reqHomeCategoryResponse, reqHomeHotResponse } from "@/type/home";
//引入vant4组件
import { Swipe as VanSwipe, SwipeItem as VanSwipeItem } from "vant";

//主界面的scrollDiv实例
const divScrollRef = ref();
//猜你喜欢组件实例
const GuessLikeRef = ref();  //getGuessLikeList
//当前组件实例
const instance:any = getCurrentInstance();
//首页轮播图数据
const bannerList = ref<reqBannerListResponse[]>([]);
//前台分类数据
const homeCategory = ref<reqHomeCategoryResponse[]>([]);
//热门推荐数据
const homeHot = ref<reqHomeHotResponse[]>([]);

//定时器实例
let timer:any = null;
let isFirst = true;
//当前页面滚动条位置
let scroll_top = ref(0);

//生命周期
onMounted(() => {
    //获取轮播图数据
    getHomeBannerList();
    //获取前台分类数据
    getHomeCategory();
    //获取热门推荐数据
    getHomeHot();
});

//判断滚动条距底部距离，实现加载更多
const getMoreGuessList = () => {
    scroll_top.value =  divScrollRef.value.scrollTop;  //存储滚动条位置
    //滚动条即将到达底部
    if(isFirst){
        //执行
        if(divScrollRef.value.clientHeight + divScrollRef.value.scrollTop + 20 >= divScrollRef.value.scrollHeight){
            //加载更多猜你喜欢数据
            GuessLikeRef.value.getGuessLikeList();
        }
        isFirst = false;
        return;
    }
    if(timer !== null){
        clearTimeout(timer);
    }
    timer = setTimeout(()=>{
        //执行
        if(divScrollRef.value.clientHeight + divScrollRef.value.scrollTop + 20 >= divScrollRef.value.scrollHeight){
            //加载更多猜你喜欢数据
            GuessLikeRef.value.getGuessLikeList();
        }
    },300)
}
//window监听滚动事件
window.addEventListener("scroll",getMoreGuessList,true);

//获取首页轮播图数据
const getHomeBannerList = async () => {
    let res = await reqBannerList(1);
    bannerList.value = res.result;
    console.log('首页轮播图数据api',res);
}
//获取前台分类数据
const getHomeCategory = async () => {
    let res = await reqHomeCategory();
    homeCategory.value = res.result;
    console.log("首页前台分类api",res);
}
//获取热门推荐数据
const getHomeHot = async () => {
    let res = await reqHomeHot();
    homeHot.value = res.result;
    console.log("首页热门推荐api",res);
}

//点击热门推荐图片跳转到推荐页面:特惠推荐type=1,爆款推荐type=2,...
const navigateToPage = (type:number) => {
    console.log({type});
}

//kepp-alive缓存生命周期
onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  window.addEventListener("scroll",getMoreGuessList,true);
  divScrollRef.value.scrollTop = scroll_top.value;  //从缓存进入页面重新赋值滚动条位置
  console.log('home component enter page!');
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
  window.removeEventListener("scroll",getMoreGuessList,true);
  console.log('home component enter cache!"62226 2029000 458 0099"');
})
//62226 2029000 458 0099

//生命周期
onBeforeUnmount(()=>{
    console.log('home component will be over!');
    window.removeEventListener("scroll",getMoreGuessList,true);
})
</script>

<style scoped lang='less'>
//自定义导航栏
.nav-custom{
    width: 375px;
    height: 85px;
    position: fixed;
    top:0;
    padding:5px;
    background-color: #44bb94;
    z-index: 99;

    .custom-title{
        width: 375px;
        display: flex;
        margin: 10px 0;

        .title-logo{
            width: 110px;
            height:24px;
            background: url("../../assets/images/logo.png") no-repeat;
            background-size:contain;
        }
        .title-tip{
            width:110px;
            padding-left:10px;
            text-align: center;
            line-height: 20px;
            border-left:1px solid #fff;

            span{
                font-size:12px;
                color:#fff;
            }
        }
    }
    .custom-search{
        width: 355px;
        height: 28px;
        border-radius: 15px;
        padding: 0 5px;
        display: flex;
        align-items: center;
        background-color: #dad1d1;

        input{
            width: 280px;
            height: 22px;
            margin: 0 10px;
            font-size: 14px;
            color: #fff;
            background-color: #dad1d1;
            border: none;
            outline: none;

            &::placeholder{
                color: #fff;
            }
        }
    }
}
//主体部分
.page-content{
    position: relative;
    top:85px;
    height: 522px;
    background-color: #f4eaea;
    overflow: scroll;
    //轮播图部分
    .content-swiper{
        height: 150px;

        img{
            width: 375px;
            height: 150px;
        }
    }
    //商品分类部分
    .content-category{
        width: 375px;
        height: 200px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;

        .category-item{
            width: 45px;
            height: 90px;
            margin: 5px 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            img{
                width: 50px;
                height: 50px;
                border-radius: 10px;
            }
            span{
                margin-top: 8px;
                font-size: 14px;
                color: #44bb94;
            }
        }
    }
    //热门推荐部分
    .content-hot{
        width: 355px;
        height: 250px;
        margin: 0 10px;
        display: flex;
        flex-wrap: wrap;

        .hot-item{
            width: 177.5px;
            height: 125px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 0.5px solid #f4eaea;
            background-color: #fff;

            .item-left{
                margin-right: 6px;
                span{
                    color:#000;
                    font-size: 14px;
                    display: block;
                    margin-bottom: 10px;
                }
                img{
                    width: 80px;
                    height: 80px;
                }
            }
            .item-right{
                span{
                    color:#44bb94;
                    font-size: 12px;
                    display: block;
                    margin-bottom: 12px;
                }
                img{
                    width: 80px;
                    height: 80px;
                }
            }
        }
    }
}

</style>